<template>
  <el-form-item v-bind="$attrs">
    <el-input
      v-if="inputType.includes(type)"
      v-bind="$attrs"
      v-on="$listeners"
      :type="type"
      :style="styleConfig"
    ></el-input>
    <el-select
      v-else-if="selectType.includes(type)"
      v-bind="$attrs"
      :type="type"
      v-on="$listeners"
      :style="styleConfig"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        v-bind="item"
      ></el-option>
    </el-select>
    <template v-else-if="dateType.includes(type)">
      <el-time-select
        v-bind="$attrs"
        :type="type"
        v-on="$listeners"
        v-if="type === 'time'"
        :style="styleConfig"
      >
      </el-time-select>
      <el-date-picker
        v-bind="$attrs"
        :type="type"
        v-on="$listeners"
        :style="styleConfig"
        v-else
      >
      </el-date-picker>
    </template>
    <el-switch
      v-else-if="switchType.includes(type)"
      v-bind="$attrs"
      :type="type"
      v-on="$listeners"
      :style="styleConfig"
    >
    </el-switch>
    <el-checkbox-group
      v-else-if="checkboxType.includes(type)"
      v-bind="$attrs"
      v-on="$listeners"
      :style="styleConfig"
    >
      <template v-if="type === 'checkboxButton'">
        <el-checkbox-button
          v-for="item in options"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-checkbox-button
        >
      </template>
      <el-checkbox
        v-else
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>
    <el-radio-group
      v-else-if="radioType.includes(type)"
      v-bind="$attrs"
      v-on="$listeners"
      :style="styleConfig"
    >
      <template v-if="type === 'radioButton'">
        <el-radio-button
          v-for="item in options"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-radio-button
        >
      </template>
      <el-radio
        v-else
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        >{{ item.label }}</el-radio
      >
    </el-radio-group>
    <el-upload
      v-else-if="uploadType.includes(type)"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-form-item>
</template>

<script>
const inputType = ["input", "textarea"];
const radioType = ["radio", "radioButton"];
const selectType = ["select"];
const checkboxType = ["checkbox", "checkboxButton"];
const dateType = ["date", "time", "datetime"];
const switchType = ["switch"];
const uploadType = ["upload"];
export default {
  props: {
    type: {
      type: String,
      required: true,
      validator: (type) => {
        return [
          ...inputType,
          ...radioType,
          ...switchType,
          ...selectType,
          ...checkboxType,
          ...dateType,
          ...uploadType,
        ].includes(type);
      },
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    styleConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      inputType,
      selectType,
      radioType,
      switchType,
      checkboxType,
      dateType,
      uploadType,
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    beforeAvatarUpload(file) {
      const isImg = ["image/jpeg", "image/jpg", "image/png"].includes(
        file.type
      );
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImg) {
        this.$message.error("请选择图片格式上传!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isImg && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped></style>
